<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { debounce } from '@/utils/debounce'

const scrollHandle = ref(null) // 滚动函数

const showBackTop = ref(false) // 是否显示返回顶部

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

onMounted(() => {
  showBackTop.value = window.scrollY > 800

  scrollHandle.value = debounce(() => {
    showBackTop.value = window.scrollY > 800
  }, 17)

  window.addEventListener('scroll', scrollHandle.value)
})

onBeforeUnmount(() => {
  window.removeEventListener('scroll', scrollHandle.value)
})
</script>

<template>
  <div class="tools-box">
    <div class="tool-item">
      <svg class="feedback-icon" viewBox="0 0 1024 1024" width="24" height="24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M800.037628 960.010751 223.962372 960.010751c-52.980346 0-95.983874-43.003528-95.983874-95.983874l0-639.892491c0-52.980346 43.003528-95.983874 95.983874-95.983874l447.924744 0c17.717453 0 31.994625 14.277171 31.994625 31.994625s-14.277171 31.994625-31.994625 31.994625L223.962372 192.139761c-17.545439 0-31.994625 14.449185-31.994625 31.994625l0 639.892491c0 17.717453 14.449185 31.994625 31.994625 31.994625l575.903242 0c17.717453 0 31.994625-14.277171 31.994625-31.994625L831.860239 351.94087c0-17.717453 14.277171-31.994625 31.994625-31.994625 17.717453 0 31.994625 14.277171 31.994625 31.994625l0 511.913993C896.021502 916.835209 852.84596 960.010751 800.037628 960.010751z M612.026205 447.924744c-8.256677 0-16.341341-3.096254-22.705863-9.460776-12.55703-12.55703-12.55703-32.682681 0-45.239711L907.374433 75.34218c12.55703-12.55703 32.682681-12.55703 45.239711 0s12.55703 32.682681 0 45.239711L634.560054 438.635982C628.367546 444.82849 620.110868 447.924744 612.026205 447.924744z M479.919368 447.924744 287.951621 447.924744c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625L479.919368 383.935495c17.717453 0 31.994625 14.277171 31.994625 31.994625C511.913993 433.647573 497.636822 447.924744 479.919368 447.924744z M672.05913 639.892491 287.951621 639.892491c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625l383.935495 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S689.604569 639.892491 672.05913 639.892491z" fill="currentColor"></path></svg>
      <span>反馈</span>
    </div>

    <div v-show="showBackTop" @click="scrollToTop" class="tool-item">
      <svg viewBox="0 0 24 24" width="24" height="24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="m12.5 7 5.25 6H13.5v8a1 1 0 0 1-2 0v-8H7.25l5.25-6Zm-9-4h18a1 1 0 0 1 0 2h-18a1 1 0 1 1 0-2Z" fill="currentColor"></path></svg>
      <span>TOP</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tools-box {
  height: 130px;
  margin-top: -65px;
  position: fixed;
  top: 50%;
  right: 60px;

  .tool-item {
    width: 48px;
    height: 60px;
    background-color: #fff;
    box-shadow: 0 6px 16px -8px rgba(0,0,0,.08), 0 9px 28px 0 rgba(0,0,0,.05), 0 12px 48px 16px rgba(0,0,0,.03);
    border-radius: 4px;
    padding-top: 9px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgba(0,0,0,.65);

    & + .tool-item {
      margin-top: 10px;
    }

    .feedback-icon {
      transform: scale(0.95);
    }

    span {
      font-family: PingFangSC;
      font-weight: 400;
      font-size: 12px;
      line-height: 20px;
      white-space: nowrap;
    }
  }
}
</style>
